<template>
<div>
  <div class="card-global" style="margin-bottom: 10px;height: 60px">
    <div style="width: 60%;display: flex;padding-left: 10px;justify-content: flex-start">
      <input v-model="data.courseName" class="class-input"  placeholder="课程名"/>
    </div>
    <div style="width: 30%;display: flex;justify-content: flex-end;padding: 10px 0px">
      <button style="margin-right: 10px" class="button-global" @click="studentLoad">查询</button>
      <button style="margin-right: 10px" class="button-global" @click="reset">刷新</button>
    </div>
  </div>
  <div class="card" style="margin-bottom: 10px;box-shadow: 0 0 5px white;background-color: rgba(255,255,255,0.18)" >
    <el-table :data="data.tableData" style="width: 100%">
      <el-table-column prop="id" label="序号"/>
      <el-table-column prop="courseName" label="课程名称" />
      <el-table-column prop="courseId" label="课程序号" />
      <el-table-column prop="courseNum" label="课程编号" />
      <el-table-column >
        <template #default="scope" style="margin-right: 10px">
          <div style="display: flex;justify-content: flex-end;padding-right: 10px">
            <button class="button-global" style="margin: 5px 0" @click="delHandler(scope.row.id)">退课</button>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div class= "card" style="box-shadow: 0 0 5px white;background-color: transparent">
    <el-pagination v-model:current-page="data.pageNum" v-model:page-size="data.pageSize"
                   @current-change = "handleCurrentChange"
                   layout="prev, pager, next" :total="data.total"/>
  </div>
</div>


</template>
<script setup>
import {reactive} from "vue";
import request from "@/utils/request";
import {ElMessage, ElMessageBox} from "element-plus";
const delHandler=(id) =>{
  ElMessageBox.confirm(
      '此操作会永久删除数据，是否确认?',
      '注意！',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(()=>{
    request.delete('/courseSel/delete/' + id).then(res=>{
    if(res.code==='200'){
      studentLoad()
      ElMessage.success('退课成功')
    } else{
      ElMessage.error(res.msg)
    }
  })
  })
}
const reset=() => {
  data.name = ''
  data.number = ''
  data.teacher = ''
  studentLoad()
}
const user = JSON.parse(localStorage.getItem("student-user"));
const data = reactive({
  courseName:'',
  courseNum:'',
  name:'',
  number: '',
  teacher: '',
  tableData:[],
  total: 0,
  pageNum: 1, //当前的页码
  pageSize: 10, // 每页个数
  formVisible: false,
  form: {}
})
const  studentLoad =() =>{
    request.get("/courseSel/getAll", {
      params:{
        pageNum: data.pageNum,
        pageSize:data.pageSize,
        courseName: data.courseName,
        courseNum: data.number,
        studentId: user.id,
        studentName: user.name,
      }} ).then(res => {
      data.tableData = res.data?.list || []
      data.total = res.data?.total || 0
    })
}
const addNote=reactive({
  tableData:[],
  total: 0,
})
studentLoad()
</script>

<style scope>
.class-input{
  border: none;
  height: 30px;
  background-color: transparent;
  width:40%;
  border-radius: 15px;
  box-shadow: 0 0 5px #ffffff;
  margin: 10px 0;
}
.class-input::placeholder{
  padding-left: 10px;
  color: rgba(240, 249, 255, 0.47);
  font-size: 14px;
}
.class-input:focus{
  outline: none;
  padding-left: 10px;
  border-color: #03a9f4;
  box-shadow: 0 0 10px #5ccaff;
  color: white;
  font-family: 黑体;
  font-size: 16px;
}
/*针对element的修改*/
.el-table__row{
  background-color: transparent!important;
  color: white;
}
.el-table{
  background-color: transparent!important;
  --el-table-row-hover-bg-color: rgba(150, 141, 141, 0.21) !important;
}
.el-table__header-wrapper{

  background-color: transparent!important;
  --el-table-header-bg-color: transparent !important;
}
.el-table tr {
  background-color: transparent;
}
.el-pagination{
  --el-pagination-bg-color: #fff9f900;
  --el-pagination-button-disabled-bg-color: #00000000;
  --el-text-color-primary: #ffffff;
  --el-pagination-button-disabled-color: #ffffff;
}
.el-table thead {
  color: #ffffff;
}

</style>